<template>
  <div class="container">
    <div class="article-detail width display-flex">
      <!-- 左边按钮 -->
      <LeftBtn :articleDetail="articleDetail" />
      <!-- 中间内容 -->
      <div class="content flex-direction-column">
        <MiddleDetail :articleDetail="articleDetail" />
        <!-- 底部输入框 -->
        <BottomInput :articleDetail="articleDetail" @addComment="getUserArticleDetail" />
        <!-- 评论列表 -->
        <CommentList :comments="comments" @updateCommentList="getUserArticleDetail" />
      </div>
      <!-- 右侧内容 -->
      <RightInfo :authorInfo="author" />
    </div>
  </div>
</template>

<script>
import LeftBtn from './component/left-btn.vue'
import MiddleDetail from './component/middle-detail.vue'
import BottomInput from './component/bottom-input.vue'
import CommentList from './component/comment-list.vue'
import RightInfo from './component/right-info.vue'
import { getArticleDetail } from '@/api/article'
export default {
  name: 'ArticleDetail',
  components: {
    LeftBtn,
    MiddleDetail,
    BottomInput,
    CommentList,
    RightInfo
  },
  data() {
    return {
      articleDetail: {},
      author: {},
      comments: []
    }
  },
  watch: {
    $route() {
      this.getUserArticleDetail()
    }
  },
  computed: {
    // 获取文章ID
    getArticleId() {
      return this.$route.params.id
    }
  },
  created() {
    this.getUserArticleDetail()
  },
  methods: {
    // 获取文章详情
    async getUserArticleDetail() {
      try {
        const res = await getArticleDetail(this.getArticleId)
        console.log(res)
        if (res.code === 200) {
          // 文章详情
          this.articleDetail = res.data
          // 作者信息
          this.author = res.data.author
          // 评论信息
          this.comments = res.data.comments
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f2f3f5;
  .content {
    margin-left: 40px;
    margin-bottom: 30px;
  }
}
.article-detail {
  padding-top: 80px;
}
</style>
